<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width
    , initial-scale=1.0">
    <meta name="referrer" content="no-referrer">
    <title>蘑菇街商城</title>
    <link rel="stylesheet" href="../css/pulic.css">
    <link rel="stylesheet" href="../css/shopping.css">
    <link rel="stylesheet" href="../css/swiper-bundle.min.css">
</head>
<body>
    <div class="header">
        <div class="box">
          <a href="./index.html">首页</a>
          <a href="list.html">商城</a>
          <a href="./cart.html">我的订单</a>
          <a>关于我们</a>
        </div>
      </div>
      <div class="nav">
          <a href= ><img src="../images/190102_088f4i166l4gkl08k297h5kk8690i_260x200.png" alt=""></a>
          <span class="mulu">目录</span>
          <div class="box">
            <input type="text">
            <button></button>
            <ul>
              <li>1</li>
              <li>2</li>
              <li>3</li>
              <li>4</li>
              <li>5</li>
              <li>6</li>
              <li>7</li>
              <li>8</li>
              <li>9</li>
              <li>10</li>
            </ul>
          </div>
          <p>消息</p>
          <p>收藏</p>
          <p class="cart">购物车</p>
          <p>下载APP</p>
          <span class="denglu">登录</span> 
          <div class="on">
            <span>您好</span> <span class="username">你的孤独</span>
            <button class="logout">注销登录</button>
          </div>
          <div class="off">
            <span>您好</span> <a href="./login.html">请登录</a>
          </div>
          <div class="list2">
              <div class="left">
                  <p class="title">主题市场</p>
                  <ul>
                      <Li>上衣</Li>
                      <Li>裙装</Li>
                      <Li>裤子</Li>
                      <Li>女鞋</Li>
                      <Li>美妆</Li>
                      <Li>包包</Li>
                      <Li>配饰</Li>
                      <Li>男友</Li>
                      <Li>内衣</Li>
                      <Li>母婴</Li>
                      <Li>家居</Li>
                      <Li>食品</Li>
                  </ul>
              </div>
              <div class="center">
                  <div class="title"> 
                    <p>热门品牌</p>
                    <span>全部品牌 ></span>
                  </div>
                  <ul>
                      <li>PRADA</li>
                      <li>SICLCILY 西西里</li>
                      <li>CHANEL</li>
                      <li>DREAM TREND</li>
                      <li>夏梵尼</li>
                      <li>御泥坊</li>
                      <li>衣阁香拉</li>
                      <li>美康粉黛</li>
                      <li>New balance</li>
                  </ul> 
              </div>
              <div class="right">
                <div class="title"> 
                    <p>流行话题</p>
                    <span>全部话题 ></span>
                </div>
                <ul>
                    <li>#小长假倒计时，明天上班穿这套！#</li>
                    <li>#小长假倒计时，明天上班穿这套！#</li>
                    <li>#小长假倒计时，明天上班穿这套！#</li>
                    <li>#小长假倒计时，明天上班穿这套！#</li>
                    <li>#小长假倒计时，明天上班穿这套！#</li>
                    <li>#小长假倒计时，明天上班穿这套！#</li>
                   
                </ul>
              </div>
          </div>
      </div>
     
      <div class="list">
          <span>主题市场</span>
          <p>限时快抢</p>
          <i>|</i>
      </div>
      <div class="banner">
          <img src="../images/200518_482bj515c0a2lb0abg0b60hl2h5l8_1134x440.jpg" alt="">
          <ul>
              <li>上衣
                  <span class="active">T恤</span>
                  <span>时尚套装</span>
                  <span>卫衣</span>
              </li>
              <li>上衣
                <span>T恤</span>
                <span>时尚套装</span>
                <span class="active">卫衣</span>
              </li>
              <li>上衣
                <span >T恤</span>
                <span class="active">时尚套装</span>
                <span>卫衣</span>
              </li>
              <li>上衣
                <span class="active">T恤</span>
                <span>时尚套装</span>
                <span>卫衣</span>
              </li>
              <li>上衣
                <span>T恤</span>
                <span class="active">时尚套装</span>
                <span>卫衣</span>
              </li>
              <li>上衣
                <span class="active">T恤</span>
                <span>时尚套装</span>
                <span>卫衣</span>
              </li>
              <li>上衣
                <span >T恤</span>
                <span>时尚套装</span>
                <span class="active">卫衣</span>
              </li>
              <li>上衣
                <span class="active">T恤</span>
                <span>时尚套装</span>
                <span>卫衣</span>
              </li>
              <li>上衣
                <span >T恤</span>
                <span class="active">时尚套装</span>
                <span>卫衣</span>
              </li>
              <li>上衣
                <span class="active">T恤</span>
                <span>时尚套装</span>
                <span>卫衣</span>
              </li>
              <li>上衣
                <span >T恤</span>
                <span>时尚套装</span>
                <span class="active">卫衣</span>
              </li>
              <li>上衣
                <span class="active">T恤</span>
                <span>时尚套装</span>
                <span>卫衣</span>
              </li>
              <li>上衣
                <span>T恤</span>
                <span class="active">时尚套装</span>
                <span>卫衣</span>
              </li>
          </ul>
          <div class="box1">
              <img src="" alt="">
              <p>菇凉好，<span>欢迎来逛蘑菇街</span></p>
              <button>会员中心</button>
          </div>
          <div class="box2">
              <i>来蘑菇街APP</i>
              <p>海量时尚好货</p>
              <img src="../images/190408_3cke94elb1k0799a9aib3bdkk75ab_260x260.png_999x999.v1c0.81.webp" alt="">
          </div>
      </div>
      <div class="shop">
          <div class="time"><img src="../images/180423_4c1k410gfcjj100b7ck185ldbc1d4_460x588.png_999x999.v1c0.81.webp" alt="">
          </div>
          <div class="goods">
            <div class="swiper-container" id="swiper1">
              <div class="swiper-wrapper">
                <div class="swiper-slide">
                   <ul >
                    <li>
                      <img src="../images/210721_8335e5j3hhdl7e5f2c5f587jia311_640x960.jpg_400x9999.v1c7E.81.webp" alt="">
                    </li>
                    <li>
                      <img src="../images/210723_742ikc1bjggbb165el7glk0agd69h_640x854.jpg_400x9999.v1c7E.81.webp" alt="">
                    </li>
                    <li>
                      <img src="../images/210429_8683jg9bjj8f379l01426dll0cfa3_750x1125.jpg_500x9999.v1c7E.81.webp" alt="">
                    </li>
                    <li>
                      <img src="../images/210721_8b312ehhjh0ha7h0i7b6g65l08fl1_800x800.jpg_400x9999.v1c7E.81.webp" alt="">
                    </li>
                </ul>
                </div>
                <div class="swiper-slide"> <ul >
                  <li>
                    <img src="../images/210723_742ikc1bjggbb165el7glk0agd69h_640x854.jpg_400x9999.v1c7E.81.webp" alt="">
                  </li>
                  <li>
                    <img src="../images/210721_8b312ehhjh0ha7h0i7b6g65l08fl1_800x800.jpg_400x9999.v1c7E.81.webp" alt="">
                  </li>
                  <li>
                    <img src="../images/210723_742ikc1bjggbb165el7glk0agd69h_640x854.jpg_400x9999.v1c7E.81.webp" alt="">
                  </li>
                  <li>
                    <img src="../images/210721_8335e5j3hhdl7e5f2c5f587jia311_640x960.jpg_400x9999.v1c7E.81.webp" alt="">
                  </li>
              </ul></div>
                <div class="swiper-slide">
                  <ul >
                    <li>
                      <img src="../images/210723_742ikc1bjggbb165el7glk0agd69h_640x854.jpg_400x9999.v1c7E.81.webp" alt="">
                    </li>
                    <li>
                      <img src="../images/210429_8683jg9bjj8f379l01426dll0cfa3_750x1125.jpg_500x9999.v1c7E.81.webp" alt="">
                    </li>
                    <li>
                      <img src="../images/210721_8b312ehhjh0ha7h0i7b6g65l08fl1_800x800.jpg_400x9999.v1c7E.81.webp" alt="">
                    </li>
                    <li>
                      <img src="../images/210723_742ikc1bjggbb165el7glk0agd69h_640x854.jpg_400x9999.v1c7E.81.webp" alt="">
                    </li>
                </ul></div>
                <div class="swiper-slide"> <ul >
                  <li>
                    <img src="../images/210723_742ikc1bjggbb165el7glk0agd69h_640x854.jpg_400x9999.v1c7E.81.webp" alt="">
                  </li>
                  <li>
                    <img src="../images/210721_8b312ehhjh0ha7h0i7b6g65l08fl1_800x800.jpg_400x9999.v1c7E.81.webp" alt="">
                  </li>
                  <li>
                    <img src="../images/210723_742ikc1bjggbb165el7glk0agd69h_640x854.jpg_400x9999.v1c7E.81.webp" alt="">
                  </li>
                  <li>
                    <img src="../images/210721_8335e5j3hhdl7e5f2c5f587jia311_640x960.jpg_400x9999.v1c7E.81.webp" alt="">
                  </li>
              </ul></div>
               
              </div>
          
              <!-- 如果需要分页器 -->
              <div class="swiper-pagination" ></div>
          
              <!-- 如果需要导航按钮 -->
              <div class="swiper-button-prev"></div>
              <div class="swiper-button-next"></div>
          
              <!-- 如果需要滚动条 -->
              <!-- <div class="swiper-scrollbar"></div> -->
            </div>
          </div>

      </div>
      
      <script src="../js/utils.js"></script>
      <script src="../js/shopping.js"></script>
      <script src="../js/swiper-bundle.min.js"></script>
      <script>
        new Swiper('#swiper2')
    
        var mySwiper = new Swiper('#swiper1', {
          // 人家对于 轮播图 的配置选项
          // direction: 'vertical', // 垂直切换选项
          loop: true, // 循环模式选项
          initialSlide :0, // 初始化的时候显示 [2] 哪一个图片
          speed: 300, // 一张图片的切换速度
          grabCursor : true, // 光标样式
          autoplay: {
            delay: 2000
          },
          pagination: {
            el: '.swiper-pagination',
          },
          navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
          },
        })
      </script>
</body>
</html>